<template>
  <div class="right">
    <h2>Right组件</h2>
    <!-- flag为true，让input显示，让button隐藏； -->
    <!-- flag为false，让input隐藏，让button显示 -->
    <input v-if="flag" type="text" @blur="showBtn" ref="ipt" />
    <button v-else @click="showIpt">按钮</button>
    <Article></Article>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true
    }
  },
  methods: {
    showBtn() {
      this.flag = false
    },
    showIpt() {
      this.flag = true
      // 通过ref找到input，然后让它 focus()
      // console.log(this.$refs.ipt) // undefined
      // this.$nextTick(fn) // nextTick 表示进入下一次循环。言外之意，表示等当前的DOM渲染完毕后才会执行fn
      // this.$nextTick(() => {
      //   // 这里一定要使用箭头函数，因为里面用了this
      //   this.$refs.ipt.focus()
      // })
    }
  },
  // updated 当data数据改变，并且页面也更新后，会自动执行 updated 函数
  updated() {
    // 写到这里，注意，flag数据变为true也好，变为false也好，都会执行updated
    // 当页面显示输入框的时候，下面的代码没有问题
    // 当页面显示按钮的时候，就找不到输入框了，下面的代码就会报错了

    // if (this.$refs.ipt) this.$refs.ipt.focus()

    // 使用 && 短路运算
    // true && 这里的代码会执行
    // false && 这里的代码不会执行
    // this.$refs.ipt && this.$refs.ipt.focus()

    // 使用ES6的可选链
    this.$refs.ipt?.focus()
  }
}
</script>

<style lang="less" scoped>
.right {
  background-color: indianred;
}
</style>
